<template>
	<view class="conter">
		<scroll-view :refresher-enabled="isOpenRefresh" scroll-y="true" style="hight: 100vh"
			refresher-background="#1c213a" :refresher-triggered="triggered" @refresherpulling="onPulling"
			@refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort"
			refresher-default-style="none" :refresher-threshold="0" scroll-anchoring="true" v-if="reload">
			<view v-if="show" class="loading">
				<view class="loadingThree">
					<text></text>
					<text></text>
					<text></text>
					<text></text>
					<text></text>
				</view>
			</view>
			<view v-if="show2" class="releaseLoading">
				<view class="text">释放刷新</view>
			</view>
			<view class="top_body" v-if="timesList.length != 0">
				<u-list @scrolltolower="scrolltolower">
					<u-list-item v-for="item in timesList" :key="item.id">
						<view class="time_body" :class="item.isMy ? 'my' : ''">
							<u--image style="position: absolute; left: 30rpx" width="40rpx" height="40rpx"
								src="../../static/images/crazy/jinbi.png"></u--image>
							<view class="time_num">{{ item.memberPropNum }}个</view>
							<u--image style="margin-left: 0rpx" width="40rpx" height="40rpx"
								src="../../static/images/itemsPrice.png"></u--image>
							<text class="price"
								:style="item.isMy ? 'color: #red' : 'color: #8A92A3'">{{ item.unitPrice.toFixed(2) }}/个</text>
							<text class="item_total">￥{{ (item.memberPropNum * item.unitPrice).toFixed(2) }}</text>
							<u-icon class="goumai" @click="clickBuy(item.memberPropNum, item.unitPrice, item.id)"
								label="购买" size="24rpx" label-pos="left" label-size="24rpx"
								:label-color="item.isMy ? 'red' : '#46A6F8'" :color="item.isMy ? 'red' : '#46A6F8'"
								name="arrow-right"></u-icon>
						</view>
					</u-list-item>
					<u-loadmore v-if="timesList.length !== 0" :status="loadStatus" />
				</u-list>
			</view>
			<view v-if="timesList.length == 0">
				<image style="width: 280rpx;
			height: 280rpx;
			margin: 275rpx 220rpx 0;" src="../../static/images/fighting.gif" mode=""></image>
			</view>

			<!-- 弹框 -->
			<u-popup :show="buy.show" bgColor="transparent" mode="bottom" @close="close">
				<view class="popopo">
					<view class="number">购买数量</view>
					<view class="stepper_box">
						<u-number-box v-model="times_buy.num" :max="times_buy.maxnum" integer min="1">
							<view slot="minus" class="minus">
								<u-icon name="minus" size="25"></u-icon>
							</view>
							<input slot="input" @input="checkInput" type="number" style="text-align: center"
								v-model="times_buy.num" class="input" />
							<view slot="plus" class="plus">
								<u-icon name="plus" color="#FFFFFF" size="25"></u-icon>
							</view>
						</u-number-box>
					</view>
					<view class="times_total">
						购买需付：
						<text>￥</text>
						{{ isNaN(this.times_buy.num) ? '0' : (times_buy.num * times_buy.price).toFixed(2) }}
					</view>
					<view class="times_btm">
						<view class="times_btm_left" @click="timesCancel">取消</view>
						<view class="times_btm_right" @click="timesBuy">确定</view>
					</view>
				</view>
			</u-popup>
			<!-- 弹框 -->
		</scroll-view>
		<realname v-if="isDialogVisible" @closeDialog="closeDialog"></realname>
	</view>
</template>

<script>
	import {
		getUserAdmin
	} from '@/utils/auth.js';
	import config from '@/config.js';
	import {
		getStatic,
		getTimesBuy
	} from '@/api/work/market.js';
	import {
		getInfo
	} from '@/api/login';
	import realname from '../../components/real/realname.vue';
	export default {
		name: 'times',
		components: {
			realname
		},
		data() {
			return {
				reload: false,
				isDialogVisible: true, //开启实名弹框
				triggered: false, //当下下拉状态 true：启动刷新  false：刷新没有触发
				isOpenRefresh: true, // 是否开启下拉
				show: false, //加载中动画
				show2: false, // 释放刷新动画
				buy: {
					show: false,
					title: '时之沙',
					total: ''
				},
				times_buy: {
					num: 1,
					maxnum: 1,
					price: '',
					total: '',
					id: ''
				},
				loadStatus: 'loadmore',
				admin: getUserAdmin(),
				imgUrl: config.gillUrl,
				imgUrl: config.imgUrl,
				timesList: [],
				totalSize: 0,
				currentPage: 1,
				obj: {
					curPage: 1,
					curPageSize: 20,
					priceOrder: '',
					numOrder: ''
				},
				onReachBottom: () => {
					if (this.timesList.length >= this.totalSize) {
						this.loadStatus = 'nomore';
						return;
					}
					this.obj.curPage++; // 更新页码
					this.loadStatus = 'loading'; // 显示加载状态
					getStatic(this.obj)
						.then((res) => {
							const newItems = res.data.pageData || [];
							this.timesList = this.timesList.concat(newItems); // 将新数据添加到列表
							if (this.timesList.length >= this.totalSize) {
								this.loadStatus = 'nomore'; // 如果已加载完所有数据，更新加载状态为 "nomore"
							} else {
								this.loadStatus = 'loadmore'; // 否则继续显示加载更多状态
							}
						})
						.catch((error) => {
							// 处理加载错误
							console.error('Error loading more data:', error);
							this.loadStatus = 'fail'; // 如果加载失败，更新加载状态为 "fail"
						});
				}
			};
		},
		created() {
			this.getStatic();
			this.getUserWithToken();
		},
		onShow() {
			this.reload = false
			this.$nextTick(() => {
				this.reload = true
			})
		},
		watch: {
			'buy.show': function(newValue) {
				this.times_buy.num = 1;
			}
		},
		methods: {
			closeDialog() {
				this.isDialogVisible = false; //弹框关闭
			},
			// 自定义下拉刷新控件被下拉
			onPulling(e) {
				if (e.detail.deltaY <= 0) {
					// 防止上滑页面也触发下拉
					return;
				}
				if (e.detail.deltaY > 100) {
					// 下拉到指定位置 才触发刷新
					this.show2 = true;
				}
			},
			// 自定义下拉刷新被触发
			async onRefresh(e) {
				if (!this.show2) return; // 判断是否触发刷新
				this.show2 = false; // 触发刷新 关闭释放刷新动画
				if (this._freshing) return;
				this.triggered = true; // 启动刷新
				this._freshing = true;
				this.show = true; // 加载中动画显示
				try {
					await this.getStatic(true); // 在这里调用获取新的列表数据的方法
				} catch (error) {
					console.error('refresh failed', error);
				} finally {
					this.closeRefresh(); // 当数据获取完毕后，关闭下拉刷新
				}
			},
			closeRefresh() {
				// 关闭刷新
				this.triggered = false; // 关闭刷新
				this._freshing = false;
				setTimeout(() => {
					this.show = false; // 加载动画关闭
					this.triggered = 'restore'; // 需要重置
					uni.showToast({
						title: '刷新成功',
						icon: 'success',
						duration: 500
					});
				}, 1000);
			},
			// 自定义下拉刷新被复位
			onRestore() {
				this.triggered = 'restore'; // 需要重置
			},
			// 自定义下拉刷新被中止
			onAbort() {
				this.triggered = 'restore'; // 需要重置
				this._freshing = false;
				this.show2 = false;
			},

			// 获取用户信息
			async getUserWithToken() {
				const res = await getInfo();
				this.admin = res.data;
			},
			async getStatic(isRefresh) {
				if (isRefresh) {
					this.timesList = []; // 清空列表
					this.obj.curPage = 1; // 重置页码
				}
				const res = await getStatic(this.obj);
				res.data.pageData.forEach((i) => {
					this.timesList.push(i); // 追加新的列表数据
				});
				this.totalSize = res.data.totalSize; // 更新总条数
			},
			scrolltolower() {
				if (this.timesList.length < this.totalSize) {
					this.obj.curPage++;
					this.getStatic();
				} else {
					this.loadStatus = 'nomore';
					this.obj.curPage = 1;
				}
			},

			async clickBuy(maxnum, price, id) {
				let userDetail = await getUserAdmin();
				if (userDetail.isRealName !== 1) {
					this.isDialogVisible = true;
				} else {
					if (this.buy.show) return;
					this.buy.show = true;
					this.times_buy.maxnum = maxnum;
					this.times_buy.price = price;
					this.times_buy.id = id;
				}
			},
			timesCancel() {
				this.buy.show = false;
			},
			async timesBuy() {
				if (!this.times_buy.num || this.times_buy.num < 0) return this.$modal.showToast('请输入正确数量');
				const obj = {
					value: this.times_buy.num,
					id: this.times_buy.id
				};
				const res = await getTimesBuy(obj);
				const id = res.data.id;
				this.buy.show = false;
				uni.navigateTo({
					url: `/pages/MarketOrder/timesOrderDetails?id=${id}`
				});
			},
			close() {
				this.show = false;
			},
			checkInput() {
				this.$nextTick(() => {
					this.times_buy.num = parseInt(this.times_buy.num);
					if (this.times_buy.num > this.times_buy.maxnum) {
						this.times_buy.num = this.times_buy.maxnum;
					}
				});
			},
			times_all() {
				this.times_buy.num = this.times_buy.maxnum;
			}
		}
	};
</script>

<style lang="scss" scoped>
	// 弹框
	::v-deep .u-popup__content {
		border-radius: 112rpx !important;
	}

	::v-deep .u-icon__icon {
		color: #ffffff !important;
		font-weight: 800 !important;
	}

	.conter {
		margin: 0 34.88rpx;

		.releaseLoading {
			position: relative;
			font-weight: 400;
			color: #ffffff;
			text-align: center;
			font-size: 32rpx;
			font-family: 'font';
			background-color: rgba(0, 0, 0, 0);

			.text {
				width: 680rpx;
				top: -70rpx;
				left: 0;
				position: absolute;
			}
		}

		.loading {
			z-index: 1;
			padding-bottom: 80rpx;
			background-color: rgba(0, 0, 0, 0);
			height: 50rpx;
			position: relative;

			.loadingThree {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 50rpx;
				background-color: rgba(0, 0, 0, 0);
			}

			.loadingThree text {
				display: inline-block;
				width: 15rpx;
				height: 15rpx;
				margin-right: 5rpx;
				border-radius: 50%;
				background: #46a6f8;
				-webkit-animation: load 1.04s ease infinite;
			}

			.loadingThree text:last-child {
				margin-right: 0rpx;
			}

			@-webkit-keyframes load {
				0% {
					opacity: 1;
				}

				100% {
					opacity: 0;
				}
			}

			.loadingThree text:nth-child(1) {
				-webkit-animation-delay: 0.13s;
			}

			.loadingThree text:nth-child(2) {
				-webkit-animation-delay: 0.26s;
			}

			.loadingThree text:nth-child(3) {
				-webkit-animation-delay: 0.39s;
			}

			.loadingThree text:nth-child(4) {
				-webkit-animation-delay: 0.52s;
			}

			.loadingThree text:nth-child(5) {
				-webkit-animation-delay: 0.65s;
			}
		}

		// 弹框
		.popopo {
			width: 750rpx;
			height: 623rpx;
			background: #1c213a;
			border-bottom: none;
			border: 2rpx solid #8A92A3;
			border-bottom: none;
			border-radius: 40rpx 40rpx 0rpx 0rpx;

			.number {
				width: 680rpx;
				height: 135rpx;
				color: #ffffff;
				font-size: 42rpx;
				font-weight: 700;
				margin: 0 34.88rpx;
				text-align: center;
				line-height: 135rpx;
				font-family: 'font';
				border-bottom: 1rpx dashed #3c424d;
			}

			.stepper_box {
				margin: auto;
				width: 610rpx;
				height: 110rpx;
				background: #211f30;
				margin-top: 50rpx;
				border: 2rpx solid #3c424d;
				border-radius: 1448rpx 1448rpx 1448rpx 1448rpx;

				.minus {
					display: flex;
					width: 101rpx;
					height: 100rpx;
					margin: 5rpx 5rpx;
					border-radius: 50%;
					background: #15142d;
					justify-content: center;
				}

				.plus {
					display: flex;
					width: 101rpx;
					height: 100rpx;
					margin: 5rpx 5rpx;
					border-radius: 50%;
					background: #15142d;
					justify-content: center;
				}

				.input {
					color: #fff;
					font-weight: 400;
					font-size: 44rpx;
					font-family: 'font';
					width: 500rpx !important;
				}
			}

			.times_total {
				color: #46a6f8;
				font-size: 31rpx;
				font-weight: 700;
				font-family: 'font';
				text-align: center;
				margin-top: 64.53rpx;
			}

			.times_btm {
				width: 680rpx;
				display: flex;
				bottom: 43rpx;
				margin: 0 34.88rpx;
				position: absolute;
				justify-content: space-between;

				.times_btm_left {
					width: 209rpx;
					height: 98rpx;
					color: #ffffff;
					font-size: 35rpx;
					font-weight: 700;
					font-family: 'font';
					background: #211f30;
					text-align: center;
					line-height: 98rpx;
					border: 2rpx solid #3c424d;
					border-radius: 17rpx;
				}

				.times_btm_right {
					width: 419rpx;
					height: 98rpx;
					color: #ffffff;
					font-size: 35rpx;
					font-weight: 700;
					text-align: center;
					font-family: 'font';
					background: #46a6f8;
					line-height: 98rpx;
					border-radius: 17rpx;
				}
			}
		}

		// 弹框
		.goumai {
			margin-right: 25rpx;
		}

		.time_body {
			position: relative;
			margin-bottom: 27rpx;
			display: flex;
			width: 680rpx;
			height: 77rpx;
			background: #130f26;
			box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 9rpx 9rpx 9rpx 9rpx;
			opacity: 1;
			justify-content: space-around;
			align-items: center;
			color: #ffffff;

			.item_total {
				text-align: left;
				display: block;
				// width: 150rpx;
				width: 160rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.buy {
				color: #46a6f8;
				font-family: 'font';
				font-size: 17rpx;
			}

			.price {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				text-align: left;
				width: 130rpx;
				position: relative;
				// color: #8A92A3;
				font-size: 24rpx;
				font-family: 'font';
			}

			.time_num {
				margin-left: 75rpx;
				text-align: left;
				width: 120rpx;
				position: relative;
			}

			.tit_img {
				position: absolute;
				left: 20rpx;
				top: 10px;
				width: 40rpx;
				height: 40rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				opacity: 1;
			}

			.itemsPrice {
				text-align: right;
				position: absolute;
				margin-left: -260rpx;
				width: 22rpx;
				height: 24rpx;
			}

			.tit_top {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				display: block;
				height: 25rpx !important;
				font-family: 'font';
				color: #ffffff !important;
				line-height: 25rpx;
				z-index: 999;
			}

			.foot {
				margin-top: 100rpx;
			}
		}

		.bg-tit {
			color: #0d0e12;
		}

		.my {
			color: red;
		}
	}
</style>